<template>
  <div class="changephone_container">
    <!-- top区域-->
    <div class="changephone_box">
      <span class="title_style">个人信息</span>
    </div>
    <!-- 登录表单区域 -->
    <el-form 
      :label-position="labelPosition"
      label-width="100px" 
      :model="formLabelAlign" 
      class="login_form" 
      id="selectForm"
    >
      <el-form-item label="手机号码" class="text_note">
        <el-input v-model="formLabelAlign.phonenumber"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-row class="el-low_in_el-form-item">
          <el-col :span="6">
            <el-input v-model="formLabelAlign.vcode"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button 
              class="messagebutton_style"
              @click="sendCode()"
            >发送验证码</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="btns_center">
        <el-button 
          class="confirmbutton_style"
          @click="submitForm()"
        >确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 弹窗区域-->
    <el-dialog :visible.sync="dialogIconVisible">
      <el-card class="box-card">
        <i class="el-icon-circle-check"></i>
      </el-card>
    </el-dialog> 
  </div>
</template>

<script>
import { updatePhonenumber } from "crm/myinfo/myinfo.js";
import { getSendcode} from "crm/login/login.js";
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
      };
    },
    methods: {
      sendCode() {
        let payload = {};
        payload.phonenumber = this.formLabelAlign.phonenumber;
        getSendcode(payload)
          .then((res) => {
            if (res.data.status !== "OK") {
              alert("验证码请求失败");
              return;
            } else if (res.data.status == "OK") {
              alert("验证码请求成功！");
              console.log(res.data.phonenum);
              localStorage.setItem("userid", res.data.data.userid);
              // localStorage.setItem("token", res.data.token);
            }
          })
          .catch((err) => {});
      },
      submitForm() {
        let payload = {};
        payload.phonenumber = this.formLabelAlign.phonenumber;
        payload.vcode = this.formLabelAlign.vcode;
        payload.userid = this.userid;
        updatePhonenumber(payload)
          .then((res) => {
            if (res.data.status == "Error") {
              alert("修改手机号失败");
              return;
            } else if (res.data.status == "OK") {
              alert("修改手机号成功！");
              localStorage.setItem("token", res.data.token);
              this.$router.push("/admin/myinfo/auditinfo");
            }
          })
          .catch((err) => {});
        // }
        // });        
      },
    },
  }
</script>

<style scoped>
.changephone_container{
  background-color: #202020;
  width: 100%;
  height: 100%;
  display: flex;
}
.changephone_box{
  background-color: #262626;
  width: 100%;
  height: 56px;
  padding: 5px 0;
}
.title_style{
  height: 100%;
  margin: 0%;
  padding: 0 48px;
  border-width: 0px;
  font-family: 'Youshebiaotihei';
  color:#6C6C6C;
  font-size: 42px;
}
/*.text_note{
  font-family: 'Youshebiaotihei';
  color:#FFFFFF;
  font-size: 15px;
}*/
#selectForm >>> .el-form-item__label {
  font-size: 12px;
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 20px;
  position: relative;
}
/deep/.el-input__inner {
  background-color: #2A2A2A;
  border: 0;
  width: 520px;
  position: relative;
}
.el-col-6 {
  width: 78%;
}
.messagebutton_style{
  /* height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  background-color: #111111;
  font-size: 15px; */
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#FDFDFD;
  background-color: #D67025;
  font-size: 20px;
}
.confirmbutton_style{
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#FDFDFD;
  background-color: #D67025;
  font-size: 35px;
}
.btns_center{
  display: flex;
  justify-content: center;
}
.login_form{
  position: absolute;
  top: 40%;
  width: 60%;
  padding: 0  50px;
  box-sizing: border-box;/* 巧妙 */
}
</style>